<template>
      <!-- 开始之后的展示内容 -->
	<view class="display_content">
        <view class="image_area">
			<uni-transition ref="ani1" :show="true">
				<image class="_copper" :src="getUrl(info.one)"></image>
			</uni-transition>
			<uni-transition ref="ani2" :show="true">
				<image class="_copper" :src="getUrl(info.two)"></image>
			</uni-transition>
			<uni-transition ref="ani3" :show="true">
				<image class="_copper" :src="getUrl(info.three)"></image>
			</uni-transition>
        </view>
		<view class="btn_start">
			<button size="mini" type="danger" @click="doIt" :loading="btnLoading"> 开 始 </button>
		</view>
	</view>
</template>
<script>
import img0 from "@/static/0.png"
import img1 from "@/static/1.png"
import imgf1 from "@/static/-1.png"
export default {
	data() {
		return {
			img0,img1,imgf1,
			btnLoading:false,
			t:null,
			info:{
				one:0,
				two:0,
				three:0
			},
			timeout:2000
		}
	},
	methods: {
		getUrl(type){
			if(type==-1){
				return this.imgf1
			}else{
				return this[`img${type}`]
			}
		},
		doIt() {
			if(this.btnLoading) return
			this.animate('ani1','50px')
			this.animate('ani2','0px')
			this.animate('ani3','-50px')
			uni.showToast({
				title: '默念所占之事',
				icon:'error',
				duration: this.timeout
			})
			this.btnLoading=true
			this.t=setTimeout(()=>{
				clearTimeout(this.t)
				// 三个钱
				this.info={
					one:this.getYao(),
					two:this.getYao(),
					three:this.getYao()
				}
				this.$emit('setYaoValue',{
					// 三个数之和大于0代表是阳（阳1,3，阴-1,-3）
					value: this.info.one+this.info.two+this.info.three > 0, 
					// -3和3代表动爻
					isMove: [-3,3].indexOf(this.info.one+this.info.two+this.info.three) != -1, // 动爻true，否则false
				})
				this.btnLoading=false
				
			},this.timeout)
		},
		animate(aniName,tx){
			// 同时右平移到 100px,旋转 360 读
			this.$refs[aniName].step({
				translateX: tx,
				translateY: this.randomNum(149,150)+'px',
				scale:0.2,
				rotate: '360'
			},{
				timingFunction: 'ease-in',
				duration:this.timeout/10,
			})
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
			this.$refs[aniName].step({
				translateX: this.randomNum(-2,2) +'px',
				translateY: this.randomNum(-30,30) +'px',
				scale:1,
				rotate: '0'
			},
			{
				delay:this.timeout*9/10,
				timingFunction: 'ease-out',
				duration:this.timeout/20,
			})
			// 开始执行动画
			this.$refs[aniName].run()
		},
		getYao() {
			// 生成一个从0-2（不含2）的随机数  小于1和大于等于1的几率各占50%
			const num = Math.floor(Math.random() * 2)
			// 大于等于1代表铜钱正面（正面多代表阳爻），（反面多代表阴爻）
			if(num>=1){return 1}else{return -1}
		},
		randomNum(a,b) {
			// 生成一个从a（含）到b（含）的随机数
			return (Math.random() * (b + 1) + a)
		},
	}
}
</script>
<style lang='scss'>
.display_content{
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	padding: 10px;
	position: relative;
	.image_area{
		box-sizing: border-box;
		margin: 0 auto;
		width: 120px;
		height: 60%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		._copper{
			width: 33px !important;
			height: 33px !important;
		}
		/* uni-transition{
			image,uni-image{
				width: 33px !important;
				height: 33px !important;
			}
		} */
		
	}
	.btn_start{
		box-sizing: border-box;
		width: 100%;
		height: 40%;
		box-shadow: 0px -0.5px 0.1px #eee;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
